<template>
	<el-dialog :title="!dataForm.id ?'添加':'修改'" :visible.sync="dialogVisible" :before-close="handleClose" width="756px">
		<el-form size="small" ref="dataForm" :model="dataForm" :rules="rules" label-width="80px">
			<el-form-item label="角色" prop="title" style="width: 380px;">
				<el-input type="text" v-model="dataForm.title" placeholder="请输入"></el-input>
			</el-form-item>
			<el-form-item label="状态">
				<el-radio v-model="dataForm.status" label="1">正常</el-radio>
				<el-radio v-model="dataForm.status" label="0">禁用</el-radio>
			</el-form-item>
		</el-form>
		<div class="quanxian">
			<div class="top">
				权限
			</div>
			<div class="content">
				<div class="item_list" v-for="(item,index) in treeList" :key="item.id">
					<el-scrollbar class="hidd_item">
						<el-tree :props="defaultProps" :data="[item]" node-key="id" show-checkbox :ref="'tree'+index"
							:default-checked-keys="autoArr" @check="(click, checked)=>{treeCheck(click, checked,index)}" 
							@check-change="check_change(index)"
							:index="item.id" :highlight-current="true">
						</el-tree>
					</el-scrollbar>
				</div>
			</div>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button @click="handleClose" size="small">取 消</el-button>
			<el-button type="primary" size="small" @click="submitForm">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
	import debounce from 'lodash/debounce'
	export default {
		data() {
			return {
				dialogVisible: false,
				treeList: [],
				dataForm: {
					id: '',
					title: '',
					status: '1',
					ids: '',
					is_post: 1
				},
				rules: {
					title: [{
						required: true,
						message: '请输入角色名称',
						trigger: 'blur'
					}],
				},
				defaultProps: {
					children: 'childs',
					label: 'title'
				},
				autoArr: []
			}
		},
		created() {

		},
		methods: {
			init() {
				this.dialogVisible = true
				this.$nextTick(() => {
					console.log(this.dataForm.id)
					if (this.dataForm.id) {
						this.getInfo_edit()
					} else {
						this.getInfo_add()
					}
				})
			},
			getInfo_edit() {
				this.$nextTick(() => {
					this.$loading()
				})
				this.$http.post(`/api/authgroup/edit`, {
					id: this.dataForm.id
				}).then(res => {
					this.$closeLoading()
					this.treeList = res.result.rules
					if (res.result.data.rules) {
						this.autoArr = res.result.data.rules.split(",")
					}
				})
			},
			getInfo_add() {
				this.$nextTick(() => {
					this.$loading()
				})
				this.$http.post(`/api/authgroup/add`, {}).then(res => {
					this.$closeLoading()
					this.treeList = res.result
				})
			},
			submitForm() {
				let arr = []
				this.treeList.map((res, index) => {
					let data = this.$refs['tree' + index][0].getCheckedKeys()
					if (arr.length != 0) {
						arr = arr.concat(data)
					} else {
						arr = data
					}
				})
				if (arr.length > 0) {
					this.dataForm.ids = arr.join(',')
				}
				this.$refs['dataForm'].validate((valid) => {
					if (valid) {
						this.$loading()
						this.$http.post(!this.dataForm.id ? '/api/authgroup/add' : '/api/authgroup/edit', this
							.dataForm).then(res => {
							this.$closeLoading()
							this.$message({
								message: res.msg,
								type: 'success', //类型是成功
								duration: 2000,
								onClose: () => {
									this.handleClose()
									this.$emit('refreshDataList')
								}
							});
						})
					} else {
						return false;
					}
				});
			},
			handleClose() {
				this.$refs.dataForm.resetFields();
				this.dataForm = {
					id: '',
					title: '',
					status: '1',
					ids: '',
					is_post: 1
				}

				this.autoArr = []
				this.treeList = []
				this.dialogVisible = false
			},
			treeCheck(click, checked,index) {
				// this.$nextTick(()=>{
				// 	console.log(this.$refs['tree'+index][0].getCheckedKeys())
				// })
			},
			check_change(index){
				let res = this.$refs['tree'+index][0].getCheckedNodes(true,true)
				res.forEach(item => {
					this.autoArr.push(item.id)
				});
			}
		}
	}
</script>
<style scoped lang="scss">
	.quanxian {
		width: 100%;
		background: #FFFFFF;
		border-radius: 4px;
		border: 1px solid #DCDFE6;

		.top {
			background: #F6F7FA;
			font-weight: 400;
			font-size: 14px;
			color: #333333;
			text-align: left;
			font-style: normal;
			height: 45px;
			line-height: 45px;
			padding-left: 20px;
		}

		.content {
			padding: 20px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.item_list {
				width: 212px;
				height: 166px;
				background: #FFFFFF;
				border-radius: 4px;
				border: 1px solid #DCDFE6;
				margin-bottom: 20px;
				padding: 5px;

				.hidd_item {
					height: 100%;
				}
			}
		}

		.content::after {
			content: "";
			width: 212px;
		}
	}
	 
	:deep(.el-scrollbar__wrap) {
	  overflow-x: hidden !important;
	}
	:deep(.el-scrollbar__bar.is-horizontal) {
	  height: 0 !important;
	}
</style>